<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>TextFit 原生示例</title>
		<style>
			body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji; padding: 16px; }
			.container { border: 1px solid #ddd; padding: 12px; margin-bottom: 16px; }
			label { display: block; margin: 12px 0; }
			input[type="range"] { width: 100%; }
		</style>
	</head>
	<body>
		<h1>TextFit 原生示例</h1>
		<label>
			容器宽度：<span id="widthLabel">320</span>px
			<input id="widthSlider" type="range" min="200" max="800" value="320" />
		</label>

		<div id="box1" class="container" style="width: 320px;">
			<h3>单行 + 省略号</h3>
			<div id="single" style="width: 100%; white-space: nowrap;">
				超超超长标题（Single line with ellipsis when overflow）— 这是一段会根据容器宽度缩放的文本
			</div>
		</div>

		<div id="box2" class="container" style="width: 320px;">
			<h3>多行 + 行高同步</h3>
			<p id="multi" style="width: 100%; margin: 0;">
				多行文本示例：当容器宽度变化时，字号会自动缩放，同时行高会同步调整，以保证所有行完全可见且不溢出。支持断点区间配置、动画过渡与字体加载就绪后重算。
			</p>
		</div>

		<script type="module" src="/src/main.ts"></script>
	</body>
</html> 